<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20" :style="{background: 'url('+imgurl+') no-repeat','background-size': '100% 140rpx'}">
        <shopro-navbar :isBack="false"
                       :background="{background:'url('+imgurl+') no-repeat','background-size': '100%'}">
            <text
                slot="content"
                style="color: #fff; width: 100%; text-align: left;padding-left: 20rpx;font-size:30rpx"
                @click="userInfo.password?'':denglu()"
            >
                {{ isLogin ? '无人机质控平台' : '去登录' }}
            </text>
        </shopro-navbar>
        <!--    搜索-->
        <view class="u-sticky-wrap u-p-t-60" style="padding-top: 60rpx;">
            <view class="u-flex u-row-left u-col-center u-p-l-20 u-p-r-20" style="width: 100%;">
<!--                <view style="width: 20%; color:#fff" @click="showareas()">-->
<!--                    {{ area_text }}-->
<!--                    <u-icon class="u-p-l-10" color="#fff" name="arrow-down" size="24"></u-icon>-->
<!--                    &lt;!&ndash; 省市区选择器 &ndash;&gt;-->
<!--                    <u-picker mode="region" v-model="showRegin" :area-code='["13", "1303", "130304"]' @cancel="showRegin=false"  @confirm="regionConfirm"></u-picker>-->
<!--&lt;!&ndash;                    <u-select v-if="areaData.length>0" mode="mutil-column-auto" safe-area-inset-bottom :pages-list="areaData" v-model="showRegin" @confirm="regionConfirm"></u-select>&ndash;&gt;-->
<!--                </view>-->
                <u-search
                    style="width: 100%;" v-model="searchVal"
                    :clearabled="true" :bg-color="'#fff'"
                    :showAction="true" actionText="搜索"
                    :search-icon-color="'#333'" :color="'#333'"
                    :placeholder-color="'#A8A9A9'"
                    :animation="true" placeholder="输入搜索内容"
                    shape="square"
                    :action-style="actionStyle"
                    :focus="focusInput"
                    @custom="gosearch"
                ></u-search>
            </view>
        </view>

        <view class="content-box u-m-t-20">
            <!--        轮播图-->

<!--            <view class="swipers">-->
<!--                <u-swiper :height="350" borderRadius="0" :pages-list="goodsInfo.images" indicator-pos="bottomCenter" mode="dot" :interval="3000"></u-swiper>-->
<!--            </view>-->

<!--            <view class="u-flex u-row-left u-col-center topicAll u-m-b-20" @click="jump('/pages/index/find')">-->
<!--                <view class="imgleft"><image src="/static/images/topic.png" style="width: 100%;height: 100%;"></image></view>-->
<!--                <view class="u-flex u-row-left u-col-center">-->
<!--                    <view class="point u-m-r-8"></view>-->
<!--                    <view class="topic">您有新的核查任务,请查收</view>-->
<!--                </view>-->
<!--            </view>-->

            <view class="u-flex u-col-center task-fenlei" style="margin-top: 160rpx;">
                <view class="u-flex-1 u-flex u-row-center task-fenlei-item" :class="verify_status=='0'?'actived':''" @click="changeCheck('0')">
                    待稽查任务({{taskTotal.wait}})
                </view>
                <view class="u-flex-1 u-flex u-row-center task-fenlei-item" :class="verify_status=='0'?'':'actived'" @click="changeCheck('1')">
                    已稽查任务({{taskTotal.processed}})
                </view>
            </view>
            <view class="taskcent u-m-t-20 u-p-l-20 u-p-r-20">
                <view v-if="!isEmpty">
                    <view class="collect-list u-m-t-20" v-for="(goods, index) in myTaskList" :key="index">
                        <shopro-list-item :option="goods" @jumpTaskDetail="jumpTaskDetail"></shopro-list-item>
                    </view>
                </view>
                <!-- 数据为空 -->
                <shopro-empty v-if="isEmpty" :image="require('@/static/images/nomsg.png')" tipText="暂无内容~">
                </shopro-empty>
                <!-- 更多 -->
                <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"/>
            </view>
        </view>
    </view>
</template>

<script>

import {mapGetters} from 'vuex';
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import { API_URL } from '@/env'
let IMG_URL_INDEX = `${API_URL}/image/bg.png`;
let chart = null
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            imgurl: IMG_URL_INDEX,
            showModal  : false,
            showRegin  : false,
            showTetel  : false,
            searchVal  : '',
            area_text  : '12332',
            stickyTop  : 60,
            actionStyle: {
                background       : '#fff',
                color            : '#40AFFF',
                padding          : '0 20rpx',
                'border-left'    : '1rpx solid #ccc',
                width            : '120rpx',
                height           : '64rpx',
                display          : 'flex',
                'align-items'    : 'center',
                'justify-content': 'center',
                borderRadius     : '0 10rpx 10rpx 0',
            },
            // goodsInfo  : {
            //     images: [require('@/static/images/lunbo.png')]
            // },
            myTaskList : [],
            isEmpty    : false,
            loadStatus : 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
            currentPage: 1,
            lastPage   : 1,
            total      : '',
            verify_status:"0",
            focusInput:false,
            taskTotal:{},
            area:''
        };
    },
    computed: {
        ...mapGetters(['isLogin', 'areaData', 'userInfo']),
    },

    created() {
        // 触底监听
        uni.$on('uOnReachBottom', data => {
            if (this.lastPage) {
                this.currentPage += 1;
                this.getmyTaskList();
            }
        });
    },
    onLoad(options) {
        if(this.$Route.query.id){
            uni.setStorageSync('fid', this.$Route.query.id);
        }
    },
    onShow() {
        this.verify_status = uni.getStorageSync("verify_status")!=''?uni.getStorageSync("verify_status"):"0";
        this.myTaskList    = [];
        this.currentPage   = 1;
        this.getmyTaskList();
        this.getmyTaskTotal();
    },
    methods: {
        changeedit() {
        },
        jumpTaskDetail(id,status){
            uni.setStorageSync('verify_status', this.verify_status);
            this.jump('/pages-list/taskDetail',{task_id:id,status:this.verify_status})
        },
        changeCheck(type) {
            this.verify_status = type;
            uni.setStorageSync('verify_status', this.verify_status);
            this.myTaskList = [];
            this.currentPage = 1;
            this.getmyTaskList();
        },
        // 确认省市区
        regionConfirm(e) {
            console.log("====e",e)
            return;
            this.area_text = `${e[0].label}${e[1].label}${e[2].label}`;
        },
        showareas() {
            this.showRegin = true
            console.log("===areaData", this.areaData)
        },

        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        //初始化 rewu列表
        getmyTaskList() {
            let that = this;
            that.$http('login.home', {
                verify_status: that.verify_status,
                area:'',
                keyword:'',
                page    : that.currentPage,
                pagesize: 10
            }).then(res => {
                that.myTaskList = [...that.myTaskList, ...res.data];
                that.isEmpty     = !that.myTaskList.length;
                that.lastPage    = (res.data.length==10);
                that.loadStatus  = that.lastPage ? 'loadmore' : 'nomore';
                this.total       = res.data.total
            });
        },
        getmyTaskTotal() {
            let that = this;
            that.$http('login.taskTotal', {
                verify_status: that.verify_status,
                area:'',
                keyword:'',
                page    : that.currentPage,
                pagesize: 10
            }).then(res => {
                that.taskTotal  = res.data;
            });
        },
        // 路由跳转
        jump(path, parmas) {
            console.log("====1111", path)
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
        gosearch(){
            debugger
            if(this.searchVal){
                console.log("====this.searchVal",this.searchVal)
                this.jump('/pages-list/searchList',{keyword:this.searchVal,area:this.area,verify_status:this.verify_status})
            }else{
                this.focusInput = true
            }

        }
    }
};
</script>

<style lang="scss" scoped>

page {
    background: #f8f8f8;
}
.home-wrap{
    min-height: 100vh;
}
.swipers {
    width: 100%;
    margin-top : 110rpx;
}

.u-sticky-wrap{
    position: fixed;
    top: 10%;
    width: 100%;
    padding-bottom:42rpx;
    background: #40AFFF;
    z-index: 100000;

}

::v-deep .u-content {
    border-radius: 10rpx 0 0 10rpx !important;
}
.collect-list{
    background: #fff;
    border-radius: 16rpx;
}
.topicAll{
    height: 100rpx;
    background: #fff;
    .imgleft{
        width: 60rpx;
        height: 60rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }
    .point{
       background:#FF8730;
        width: 10rpx;
        height: 10rpx;
        border-radius:50%;
    }
    .topic{
        color:#999999;
    }
}
.task-fenlei{
    background: #fff;
    height: 92rpx;
    color:#999;

    .task-fenlei-item{
        border-bottom: 2rpx solid transparent;
        height: 100%;
        &.actived{
            color:#40AFFF;
            border-bottom: 2rpx solid #40AFFF;
        }
    }

}
</style>
